<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">
    <!-- colon 表示，是否统一显示 label 冒号 -->
    <!--第一行  -->
    <t-row>
      <t-col :span="12">
        <SearchForm
          :searchFormDataProp="searchFormDataProp"
          @onSearchFormSubmitEmit="onSearchFormSubmit"
        ></SearchForm>
        <t-divider />
      </t-col>
    </t-row>
    <!-- 第一部分.txt -->
    <!-- 第二行：新增护理项目 -->

    <t-row>
      <t-col :span="1" :offset="11">
        <t-button
          theme="primary"
          type="submit"
          @click="dialogVisibleProp = true"
          dialogTitle="新增"
          >新增护理项目</t-button
        >
        <DialogForm
          :dialogVisibleProp="dialogVisibleProp"
          :dialogTitleProp="dialogTitleProp"
          :dialogFormDataProp="dialogFormDataProp"
          @onDialogFormResetEmit="onDialogFormReset"
          @onDialogFormSubmitEmit="onDialogFormSubmit"
        ></DialogForm>
      </t-col>
    </t-row>
    <!-- &lt;!&ndash; 第三行：列表 &ndash;&gt; -->
    <t-row>
      <TableList
        :tableDataProp="tableDataProp"
        :totalProp="totalProp"
        @handleDeleteEmit="handleDelete"
        @openDialogEmit="openDialog"
        @handleStatusEmit="handleStatus"
        @onPageChangeEmit="onPageChange"
      ></TableList>
      <!-- <t-pagination
         v-model="paginationParam.pageNum"
         v-model:pageSize="paginationParam.pageSize"
         :total="totalProp"
         @change="onPageChange"
       /> -->
    </t-row>
  </div>
</template>

<script setup lang="ts">
//-----------------------------一、搜索表单-----------------------------

import { ref, reactive, computed, onMounted } from 'vue'
import { Message, MessagePlugin, PaginationProps } from 'tdesign-vue-next'
import {
  statusOptions,
  rules,
  tableColumns
} from '@/pages/serve/project/constants'
// import { tableColumns } from "@/pages/serve/project/constants";
import {
  getProjectPage,
  getProjectDetails,
  addProject,
  updateProject,
  deleteProject,
  updateProjectStatus
} from '@/api/serve'
import SearchForm from '@/pages/serve/project/components/SearchForm.vue'
import DialogForm from '@/pages/serve/project/components/DialogForm.vue'
import TableList from '@/pages/serve/project/components/TableList.vue'

//#region 搜索表单
//1、SearchForm组件的props属性
const searchFormDataProp = ref({
  name: '',
  status: undefined
})
//2、SearchForm组件的evens事件和方法
// 搜索按钮
const onSearchFormSubmit = (searchFormData) => {
  //1.异步请求分页查询接口
  queryPage({ pageNum: 1, pageSize: 10, ...searchFormData })
}
//搜索参数
// const searchParams = computed(
//   () => {
//     return {
//       pageSize: paginationParam.value.pageSize,
//       pageNum: paginationParam.value.pageNum,
//       name: SearchFormDataProp.value.name,
//       status: SearchFormDataProp.value.status,
//     }
//   }
// );
//分页响应参数
const paginationParam = ref({
  pageSize: 10,
  pageNum: 1
})
const queryPage = async (searchParams) => {
  //1.异步请求分页查询接口
  const res = await getProjectPage(searchParams)
  if (res.code === 200) {
    //2.将分页结果赋值给data
    tableDataProp.value = res.data.records
    //3.将总记录数赋值给total
    totalProp.value = res.data.total
    //4.提示用户查询成功
    MessagePlugin.success('分页查询成功')
  }
}

// ------------------------二、按钮对话框------------------------
//-------------------------DialogForm组件-----------------------
//#region 按钮对话框
//1.DialogForm组件的props属性
const dialogVisibleProp = ref(false)
const dialogTitleProp = ref('新增')
const dialogFormDataProp = ref({
  name: '',
  price: 0.0,
  unit: '',
  orderNo: 1,
  status: 1,
  image: '',
  nursingRequirement: '',
  id: undefined
})

const onDialogFormReset = () => {
  //按照resetType类型重置之后关闭对话框
  dialogVisibleProp.value = false
}
//2.DialogForm组件的evens事件和方法
const onDialogFormSubmit = async (dialogFormData) => {
  let res = null
  // 1.发起新增或者修改接口
  if (dialogFormData.id) {
    res = await updateProject(dialogFormData)
  } else {
    res = await addProject(dialogFormData)
  }
  if (res.code === 200) {
    //3.TODO分页查询刷新列表数据
    queryPage({ pageNum: 1, pageSize: 10 })
    //3.关闭对话框 和 给出提示弹框
    dialogVisibleProp.value = false
    MessagePlugin.success('提交成功')
  }
}

//文件上传相关变量
/* const imageFiles = ref([]);
const uploadRef = ref();
const imageViewerProps = ref({
  closeOnEsKeydown: false,
});
const sizeLimit = ref({
  size: 2,
  unit: 'MB',
});
//对话框表单中的相关变量

//对话框表单中的状态 计算属性 用于双向绑定
const statusString = computed({
  get: () => {
    return dialogFormData.value.status === 1 ? '1' : '0';
  },
  set: (value) => {
    dialogFormData.value.status = value === '1' ? 1 : 0;
  }
});

//2.2、按钮对话框事件和方法
//对话框相关的事件
const handleUploadFail = ({ file }) => {
  MessagePlugin.error(`文件 ${file.name} 上传失败`);
};
const onUploadSuccess = (context) => {
  //图片回显
  const uploadImageUrl = context.response.data;
  imageFiles.value[0].url = uploadImageUrl;
  //给image赋值
  dialogFormData.value.image = uploadImageUrl;
};
//对话框表单的相关事件
//重置按钮
const onDialogFormReset = () => {
  dialogVisible.value = false;
  dialogFormRef.value.reset();
  imageFiles.value = [];
  dialogFormData.value.image = "";
}; */

//----------------------TableList组件-------------------------------------
//1.TableList组件对外的props
const tableDataProp = ref([])
const totalProp = ref(0)
// const imageFiles = ref([]);
//2.TableList组件对外的events
//记录操作事件
const handleDelete = async (id) => {
  //调用删除api
  const res = await deleteProject(id)
  if (res.code === 200) {
    //查询分页
    queryPage({ pageNum: 1, pageSize: 10 })
    //消息提示
  }
}
const openDialog = async (id) => {
  //1.打开对话框
  dialogVisibleProp.value = true
  //2.调用详情API
  const res = await getProjectDetails(id)
  if (res.code === 200) {
    //3.对话框数据填充
    dialogFormDataProp.value = res.data
    //图片回显
    // imageFiles.value = [{ url: res.data.image }];
  }
}
const handleStatus = async (row) => {
  //1.对状态进行反转
  const params = { id: row.id, status: row.status === 1 ? 0 : 1 }
  //2.调用更新状态API
  const res = await updateProjectStatus(params)
  if (res.code === 200) {
    //3.查询分页
    queryPage({ pageNum: 1, pageSize: 10 })
  }
}

onMounted(() => {
  //分页查询
  queryPage({ pageNum: 1, pageSize: 10 })
})
//分页事件
const onPageChange = (pageInfo) => {
  paginationParam.value.pageNum = pageInfo.current
  paginationParam.value.pageSize = pageInfo.pageSize
  //1.获取分页参数
  queryPage(paginationParam.value)
}
</script>

<style scoped>
</style>
